<template>
    <div class="box-body">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">年度考核信息</h3>
            </div>
            <div class="box-body">
                <el-form :model="editKPI" status-icon ref="editKPI" label-width="160px">
                    <div class="col-sm-6">
                        <el-form-item label="考核年度" :required="true">
                            <el-select :disabled="!isEditable" v-model="editKPI.year" @change="value=>editKPI.year = value">
                                <el-option v-for="item in this.years" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="col-sm-6">
                        <el-form-item label="考核结果" :required="true">
                            <el-select :disabled="!isEditable" v-model="editKPI.result">
                                <el-option v-for="item in this.results" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import Utils from "../../../common/utils"
    let util = new Utils()
    export default {
        name: "KPIForm",
        props: ["kpi", "editable"],
        data(router) {
            return {
                isEditable: false,
                editKPI: {
                    year: new Date().getFullYear(),
                    result: 1
                },
                results: [],
                years: []
            };
        },
        created: function() {
            if (this.kpi) {
                this.editKPI = this.kpi;
            }
            if (this.editable != null && this.editable != undefined) {
                this.isEditable = this.editable;
            }
            this.results = this.$store.state.sysconfigs.kpiresults
            this.years = util.getKpiYears()
        },
        methods: {
            getData: function() {
                var validRes = true;
                this.$refs.editKPI.validate(valid => {
                    if (valid) {
                        validRes = true;
                    } else {
                        console.log("error submit!!");
                        validRes = false;
                        return false;
                    }
                });
                console.log(" editKPI:", JSON.stringify(this.editKPI));
                if (!validRes) {
                    return null;
                }
                return this.editKPI;
            }
        }
    };
</script>

